<template>
  <div>
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/"
        ><i class="el-icon-shopping-bag-1"></i><span v-text="$t('m.webshop')"> </span
      ></el-menu-item>
      <el-menu-item v-if="token" index="/user" class="item">
        <i class="el-icon-s-check"></i><span v-text="$t('m.mine')" />
      </el-menu-item>
      <el-menu-item v-if="!token" index="/login" class="item"
        ><i class="el-icon-loading"></i><span>登录/注册</span></el-menu-item
      >
      <el-menu-item index="/order" class="item"
        ><i class="el-icon-s-order"></i><span v-text="$t('m.order')"> </span
      ></el-menu-item>
      <el-menu-item index="/shopCart" class="item"
        ><i class="el-icon-shopping-cart-2"></i> <span v-text="$t('m.cart')" />
      </el-menu-item>
      <el-menu-item class="item" @click="changeLangUS">English</el-menu-item>
      <el-menu-item class="item" @click="changeLangCN">中文</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/',

      menuItem: {
        index: '',
        name: ''
      }
    }
  },
  computed: {
    token: function() {
      return this.$store.state.user.token
    }
  },
  methods: {
    //国际化
    changeLangCN() {
      this.$i18n.locale = 'zh-CN' //切换中文
    },
    changeLangUS() {
      this.$i18n.locale = 'en-US' //切换英文
    }
  }
}
</script>

<style scoped>
.item {
  float: right !important;
}
</style>
